<template>
  <div>
    <div class="no1">
      <div class="center1">
        <!-- f1导航栏 -->
        <div>
          <el-menu
            text-color="#000"
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">目的地</el-menu-item>
            <el-menu-item index="1">酒店</el-menu-item>
            <el-menu-item index="2">景点</el-menu-item>
            <el-menu-item index="3">美食</el-menu-item>
            <el-menu-item index="4">旅行者之选</el-menu-item>
            <el-menu-item index="4">App下载</el-menu-item>
            <el-submenu index="5">
              <template slot="title">···</template>
              <el-menu-item index="2-1">航空公司</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <!-- 面包屑 -->
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
            <el-breadcrumb-item>亚洲</el-breadcrumb-item>
            <el-breadcrumb-item>中国</el-breadcrumb-item>
            <el-breadcrumb-item>上海地区</el-breadcrumb-item>
            <el-breadcrumb-item>上海市</el-breadcrumb-item>
            <el-breadcrumb-item>上海酒店</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 酒店标题区域 -->
        <div class="hotel_title_area">
          <div class="cTitle">和平饭店</div>
          <div class="eTitle">Fairmont Peace Hotel</div>
          <div class="recom_rank">
            <div class="recom">
              <div>
                <el-rate
                  v-model="value"
                  disabled
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </div>
              <a href="">10883条点评</a>
            </div>
            <div class="recom_rank_xian"></div>
            <div class="rank">上海市排名第3的酒店(共5041个)</div>
          </div>
          <div class="address">
            <i class="iconfont">&#xe768;</i>
            <a href="">200002 中国 上海市 黄浦区南京东路20号</a>
          </div>
        </div>
        <!-- 下 -->
      </div>
    </div>
    <div class="no2">
      <div class="center2">
        <div class="f2_whole">
          <!-- 预定区 -->
          <div class="reserve_area">
            <div class="reserve_area_tit">
              <h3>让您以优惠价格入住</h3>
            </div>
            <div class="ruzhu_tuifang">
              <!-- 入住日期 -->
              <div class="ruzhu">
                <div class="colork"></div>
                <i class="iconfont">&#xeb2b;</i>
                <div class="rz_inner">
                  <div>入住</div>
                  <div>
                    <div class="block">
                      <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 退房日期 -->
              <div class="tuifang">
                <div class="colork"></div>
                <i class="iconfont">&#xeb2b;</i>
                <div class="tf_inner">
                  <div>退房</div>
                  <div>
                    <div class="block">
                      <el-date-picker
                        v-model="value2"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 房间选择 -->
            <div class="room_whole">
              <div class="room" @click="svalue = !svalue">
                <div class="colork"></div>
                <i class="iconfont">&#xe62e;</i>
                <div class="rm_inner">
                  <div>顾客</div>
                  <div>1间客房,2位成人,0名儿童</div>
                </div>
              </div>
              <div class="people" v-show="svalue">
                <div class="people_content">
                  <div class="room_count">
                    <i class="iconfont">&#xe619;</i>
                    <div class="c_name">客房数</div>
                    <div>
                      <el-input-number
                        v-model="num1"
                        :step="1"
                        step-strictly
                      ></el-input-number>
                    </div>
                  </div>
                  <div class="customer_count">
                    <i class="iconfont">&#xe62e;</i>
                    <div class="c_name">入住人数</div>
                    <div>
                      <el-input-number
                        v-model="num2"
                        :step="1"
                        step-strictly
                      ></el-input-number>
                    </div>
                  </div>
                  <div class="aid_count">
                    <i class="iconfont">&#xe642;</i>
                    <div class="c_name">儿童</div>
                    <div>
                      <el-input-number
                        v-model="num3"
                        :step="1"
                        step-strictly
                      ></el-input-number>
                    </div>
                  </div>
                </div>
                <div class="clean">
                  <h3>更新</h3>
                </div>
              </div>
            </div>
            <div class="adv1">
              <h3>锁定这些网站中的优惠价格</h3>
            </div>
            <!-- 携程 -->
            <div class="ctrip">
              <a href="https://hotels.ctrip.com/" class="ctrip_main">
                <div class="ctrip_logo">
                  <img src="/detail_f2_img/hotel-reserve/ctrip.gif" />
                </div>
                <div class="ctrip_price">¥1399</div>
                <button class="ctrip_look">
                  <h3>查看优惠</h3>
                </button>
              </a>
              <div class="adv4">
                <i class="el-icon-check"></i>
                <span>立即预定, 入住付款</span>
              </div>
            </div>
            <div class="line"></div>
            <!-- agoda -->
            <div class="agoda">
              <a href="https://www.agoda.cn/" class="agoda_main">
                <div class="agoda_logo">
                  <img src="/detail_f2_img/hotel-reserve/Agoda.png" />
                </div>
                <div class="agoda_price">¥1599</div>
                <button class="agoda_look">
                  <h3>查看优惠</h3>
                </button>
              </a>
              <div class="adv4">
                <i class="el-icon-check"></i>
                <span>立即预定, 入住付款</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="adv2">
              <h3>显示的价格由我们的合作伙伴提供,反映了住宿所需的总费</h3>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="lunbo_area">
            <div class="thumb-example">
              <!-- swiper1 -->
              <swiper
                class="swiper gallery-top"
                :options="swiperOptionTop"
                ref="swiperTop"
              >
                <swiper-slide class="slide-1"></swiper-slide>
                <swiper-slide class="slide-2"></swiper-slide>
                <swiper-slide class="slide-3"></swiper-slide>
                <swiper-slide class="slide-4"></swiper-slide>
                <swiper-slide class="slide-5"></swiper-slide>
                <swiper-slide class="slide-6"></swiper-slide>
                <swiper-slide class="slide-7"></swiper-slide>
                <swiper-slide class="slide-8"></swiper-slide>
                <swiper-slide class="slide-9"></swiper-slide>
                <swiper-slide class="slide-10"></swiper-slide>
                <swiper-slide class="slide-11"></swiper-slide>
                <swiper-slide class="slide-12"></swiper-slide>
                <swiper-slide class="slide-13"></swiper-slide>
                <swiper-slide class="slide-14"></swiper-slide>
                <swiper-slide class="slide-15"></swiper-slide>
                <swiper-slide class="slide-16"></swiper-slide>
                <swiper-slide class="slide-16"></swiper-slide>
                <swiper-slide class="slide-17"></swiper-slide>
                <swiper-slide class="slide-18"></swiper-slide>
                <swiper-slide class="slide-19"></swiper-slide>
                <swiper-slide class="slide-20"></swiper-slide>
                <swiper-slide class="slide-21"></swiper-slide>
                <swiper-slide class="slide-22"></swiper-slide>
                <swiper-slide class="slide-23"></swiper-slide>
                <swiper-slide class="slide-24"></swiper-slide>
                <swiper-slide class="slide-25"></swiper-slide>
                <swiper-slide class="slide-26"></swiper-slide>
                <swiper-slide class="slide-27"></swiper-slide>
                <swiper-slide class="slide-28"></swiper-slide>
                <swiper-slide class="slide-29"></swiper-slide>
                <swiper-slide class="slide-30"></swiper-slide>
                <swiper-slide class="slide-31"></swiper-slide>
                <swiper-slide class="slide-32"></swiper-slide>
                <swiper-slide class="slide-33"></swiper-slide>
                <swiper-slide class="slide-34"></swiper-slide>
                <swiper-slide class="slide-35"></swiper-slide>
                <swiper-slide class="slide-36"></swiper-slide>
                <swiper-slide class="slide-37"></swiper-slide>
                <swiper-slide class="slide-38"></swiper-slide>
                <swiper-slide class="slide-39"></swiper-slide>
                <swiper-slide class="slide-40"></swiper-slide>
                <div
                  class="swiper-button-next swiper-button-white"
                  slot="button-next"
                ></div>
                <div
                  class="swiper-button-prev swiper-button-white"
                  slot="button-prev"
                ></div>
              </swiper>
              <!-- swiper2 Thumbs -->
              <swiper
                class="swiper gallery-thumbs"
                :options="swiperOptionThumbs"
                ref="swiperThumbs"
              >
                <swiper-slide class="slide-1"></swiper-slide>
                <swiper-slide class="slide-2"></swiper-slide>
                <swiper-slide class="slide-3"></swiper-slide>
                <swiper-slide class="slide-4"></swiper-slide>
                <swiper-slide class="slide-5"></swiper-slide>
                <swiper-slide class="slide-6"></swiper-slide>
                <swiper-slide class="slide-7"></swiper-slide>
                <swiper-slide class="slide-8"></swiper-slide>
                <swiper-slide class="slide-9"></swiper-slide>
                <swiper-slide class="slide-10"></swiper-slide>
                <swiper-slide class="slide-11"></swiper-slide>
                <swiper-slide class="slide-12"></swiper-slide>
                <swiper-slide class="slide-13"></swiper-slide>
                <swiper-slide class="slide-14"></swiper-slide>
                <swiper-slide class="slide-15"></swiper-slide>
                <swiper-slide class="slide-16"></swiper-slide>
                <swiper-slide class="slide-16"></swiper-slide>
                <swiper-slide class="slide-17"></swiper-slide>
                <swiper-slide class="slide-18"></swiper-slide>
                <swiper-slide class="slide-19"></swiper-slide>
                <swiper-slide class="slide-20"></swiper-slide>
                <swiper-slide class="slide-21"></swiper-slide>
                <swiper-slide class="slide-22"></swiper-slide>
                <swiper-slide class="slide-23"></swiper-slide>
                <swiper-slide class="slide-24"></swiper-slide>
                <swiper-slide class="slide-25"></swiper-slide>
                <swiper-slide class="slide-26"></swiper-slide>
                <swiper-slide class="slide-27"></swiper-slide>
                <swiper-slide class="slide-28"></swiper-slide>
                <swiper-slide class="slide-29"></swiper-slide>
                <swiper-slide class="slide-30"></swiper-slide>
                <swiper-slide class="slide-31"></swiper-slide>
                <swiper-slide class="slide-32"></swiper-slide>
                <swiper-slide class="slide-33"></swiper-slide>
                <swiper-slide class="slide-34"></swiper-slide>
                <swiper-slide class="slide-35"></swiper-slide>
                <swiper-slide class="slide-36"></swiper-slide>
                <swiper-slide class="slide-37"></swiper-slide>
                <swiper-slide class="slide-38"></swiper-slide>
                <swiper-slide class="slide-39"></swiper-slide>
                <swiper-slide class="slide-40"></swiper-slide>
              </swiper>
            </div>
          </div>
          <!-- 图库 -->
          <div class="photo_gallery">
            <div class="photo_gallery1">
              <a href="">
                <img
                  src="/detail_f2_img/hotel-reserve/photo_gallery/hp-1.jpg"
                  alt=""
                />
              </a>
            </div>
            <div class="photo_gallery1">
              <a href="">
                <img
                  src="/detail_f2_img/hotel-reserve/photo_gallery/hp-2.jpg"
                  alt=""
                />
              </a>
            </div>
            <div class="photo_gallery1">
              <a href="">
                <img
                  src="/detail_f2_img/hotel-reserve/photo_gallery/hp-3.jpg"
                  alt=""
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 5,
      num1: 0,
      num2: 0,
      num3: 0,
      svalue: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      swiperOptionTop: {
        loop: true,
        loopedSlides: 40, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 40, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.center1,
.center2 {
  width: 1200px;
  margin: 0 auto;
}
.no1 {
  .center1 {
    margin: 0 auto;
    width: 1200px;

    // 导航栏
    .el-menu-demo {
      border-top: 1px solid #e0e0e0;
      > .el-menu-item {
        height: 50px;
        margin: 0 15px;
        border-bottom-color: #000;
      }
      .is-active {
        font-weight: 800;
      }
    }
    //面包屑
    .el-breadcrumb {
      margin: 18px 0;
    }
    // 酒店标题区域
    .hotel_title_area {
      display: flex;
      flex-flow: column;

      .cTitle {
        font-size: 32px;
        font-weight: 700;
      }
      .eTitle {
        font-size: 32px;
        font-weight: 700;
      }
      .recom_rank {
        display: flex;
        // width: 500px;
        color: #078171;
        .recom {
          display: flex;
          a {
            text-decoration: none;
            color: #078171;
          }
        }
        .recom_rank_xian {
          width: 1px;
          height: 25px;
          background-color: #e5e5e5;
          margin: 0 20px;
        }
      }
    }
  }
}
.no2 {
  background-color: #f2f2f2;
  .center2 {
    margin: 0 auto;
    width: 1200px;
    .f2_whole {
      margin: 25px 0px;
      display: flex;
      justify-content: space-between;
      // 预订区
      .reserve_area {
        display: flex;
        flex-flow: column;
        background-color: #fff;
        width: 380px;
        height: 450px;
        box-sizing: border-box;
        box-shadow: 10px 10px 25px 2px #c3acac;
        padding: 4px 16px 0px;
        margin-right: 20px;
        .reserve_area_tit > h3 {
          color: #2c2c2c;
          font-size: 16px;
          text-align: center;
          margin: 20px 0;
        }
        .ruzhu_tuifang {
          display: flex;
          .ruzhu {
            display: flex;
            align-items: center;
            width: 175px;
            height: 42px;
            border: 1px solid #d6d6d6;
            border-radius: 5px;
            margin-right: 10px;
            .colork {
              width: 8px;
              height: 100%;
              background-color: #00a680;
            }
            .rz_inner {
              margin-left: 5px;
              display: flex;
              flex-direction: column;
              div:first-child {
                width: auto;
                font-size: 12px;
              }
              ::v-deep .el-input__inner {
                width: 120px;
                height: 20px;
                padding: 0;
                border: none;
              }
              ::v-deep .el-input__prefix {
                display: none;
              }
            }
          }
          .tuifang {
            display: flex;
            align-items: center;
            width: 175px;
            height: 42px;
            border: 1px solid #d6d6d6;
            border-radius: 5px;
            .colork {
              width: 8px;
              height: 100%;
              background-color: #d91e18;
            }
            .tf_inner {
              margin-left: 5px;
              display: flex;
              flex-direction: column;
              div:first-child {
                width: auto;
                font-size: 12px;
              }
              ::v-deep .el-input__inner {
                width: 120px;
                height: 20px;
                padding: 0;
                border: none;
              }
              ::v-deep .el-input__prefix {
                display: none;
              }
            }
          }
        }
        .room_whole {
          display: flex;
          position: relative;
          .room {
            display: flex;
            align-items: center;
            width: 100%;
            height: 42px;
            border: 1px solid #d6d6d6;
            border-radius: 5px;
            margin-top: 15px;
            .colork {
              width: 8px;
              height: 100%;
              background-color: #00a680;
            }
            .rm_inner {
              margin-left: 5px;
              display: flex;
              flex-direction: column;
              div:first-child {
                width: auto;
                font-size: 12px;
              }
            }
          }
          .people {
            position: absolute;
            z-index: 400;
            left: 365px;
            width: 290px;
            height: 260px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 32px 16px 16px;
            .people_content {
              display: flex;
              flex-direction: column;
              .room_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                ::v-deep .el-input-number {
                  width: 140px;
                }
                .c_name {
                  color: #2c2c2c;
                  font-size: 14px;
                  font-weight: 800;
                }
              }
              .customer_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                ::v-deep .el-input-number {
                  width: 140px;
                }
                .c_name {
                  color: #2c2c2c;
                  font-size: 14px;
                  font-weight: 800;
                }
              }
              .aid_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                ::v-deep .el-input-number {
                  width: 140px;
                }
                .c_name {
                  color: #2c2c2c;
                  font-size: 14px;
                  font-weight: 800;
                }
              }
            }
            .clean {
              width: 100%;
              line-height: 35px;
              text-align: center;
              background-color: #000;
              color: #fff;
              font-size: 14px;
              border-radius: 5px;
            }
          }
        }
        .adv1 {
          text-align: center;
          margin: 15px 0;
          h3 {
            color: #4a4a4a;
            font-size: 16px;
            font-weight: 400;
          }
        }
        .ctrip,
        .agoda {
          display: flex;
          flex-direction: column;
          margin: 10px;

          .adv4 {
            font-size: 12px;
            color: #4a4a4a;
            // margin: 5px 0;
          }
        }
        .line {
          width: 100%;
          height: 0.5px;
          background-color: #7c7c7c;
        }
        .ctrip_main,
        .agoda_main {
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 90px;
          }
          .ctrip_price,
          .agoda_price {
            font-size: 25px;
            font-weight: 700;
          }
          .ctrip_look,
          .agoda_look {
            border: none;
            cursor: pointer;
            width: 120px;
            line-height: 45px;
            background-color: #ffcc00;
            text-align: center;
            border-radius: 5px;
          }
        }
        .adv2 {
          text-align: center;
          h3 {
            color: #767676;
            font-size: 12px;
            font-weight: 400;
            margin-top: 20px;
          }
        }
      }
      // 轮播图区域
      .lunbo_area {
        width: 610px;
        .thumb-example {
          height: 450px;
          background-color: black;
        }

        .swiper {
          .swiper-slide {
            background-size: cover;
            background-position: center;

            &.slide-1 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-1.jpg");
            }
            &.slide-2 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-2.jpg");
            }
            &.slide-3 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-3.jpg");
            }
            &.slide-4 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-4.jpg");
            }
            &.slide-5 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-5.jpg");
            }
            &.slide-6 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-6.jpg");
            }
            &.slide-7 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-7.jpg");
            }
            &.slide-8 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-8.jpg");
            }
            &.slide-9 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-9.jpg");
            }
            &.slide-10 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-10.jpg");
            }
            &.slide-11 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-11.jpg");
            }
            &.slide-12 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-12.jpg");
            }
            &.slide-13 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-13.jpg");
            }
            &.slide-14 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-14.jpg");
            }
            &.slide-15 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-15.jpg");
            }
            &.slide-16 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-16.jpg");
            }
            &.slide-17 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-17.jpg");
            }
            &.slide-18 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-18.jpg");
            }
            &.slide-19 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-19.jpg");
            }
            &.slide-20 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-20.jpg");
            }
            &.slide-21 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-21.jpg");
            }
            &.slide-22 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-22.jpg");
            }
            &.slide-23 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-23.jpg");
            }
            &.slide-24 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-24.jpg");
            }
            &.slide-25 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-25.jpg");
            }
            &.slide-26 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-26.jpg");
            }
            &.slide-27 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-27.jpg");
            }
            &.slide-28 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-28.jpg");
            }
            &.slide-29 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-29.jpg");
            }
            &.slide-30 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-30.jpg");
            }
            &.slide-31 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-31.jpg");
            }
            &.slide-32 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-32.jpg");
            }
            &.slide-33 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-33.jpg");
            }
            &.slide-34 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-34.jpg");
            }
            &.slide-35 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-35.jpg");
            }
            &.slide-36 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-36.jpg");
            }
            &.slide-37 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-37.jpg");
            }
            &.slide-38 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-38.jpg");
            }
            &.slide-39 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-39.jpg");
            }
            &.slide-40 {
              background-image: url("/public/detail_f2_img/hotel-reserve/photo_gallery/hp-40.jpg");
            }
          }

          &.gallery-top {
            height: 80%;
            width: 100%;
          }
          &.gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: gap 0;
          }
          &.gallery-thumbs .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
          }
          &.gallery-thumbs .swiper-slide-active {
            opacity: 1;
          }
        }
      }
      //图库
      .photo_gallery {
        margin-left: 1px;
        // width: 180px;
        height: 420px;
        .photo_gallery1 {
          img {
            width: 180px;
            height: 147px;
          }
        }
      }
    }
  }
}
</style>
